<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>策略管理</title>
    <script src="js/public.js"></script>
    <!--<link rel="stylesheet" href="css/index.css" type="text/css">-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="css/currency.css"/>
    <link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome.css"/>
    <link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome.min.css"/>

    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Access-Control-Allow-Origin" content="application/json; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 启用 WebApp 全屏模式 -->
    <meta http-equiv="Cache-Control" content="no-transform "/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta name="format-detection" content="telphone=no, email=no"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/md5.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/StrategyManagement.js"></script>
    <script src="js/rangeSlider.js" type="text/javascript"></script>

    <!--<script type="text/javascript">
    window.onload=function(){

           var fontsize = window.innerWidth/7.5>100?100:window.innerWidth/7.5>100;
           alert(fontsize)
        var winwidth = window.innerWidth
        document.documentElement.style.fontSize = winwidth/7.5 + 'px';
        window.onresize = function () {
            var winwidth = window.innerWidth;
            document.documentElement.style.fontSize = winwidth/7.5 + 'px';
        }
    }
</script>-->
    <script>
        window.onload = function(){

        }
    </script>
</head>

<body>
<div class="container-fluid">
    <div class="strategy_head">
        <h1>策略列表</h1>
        <form class="form-inline" style="margin-top: 5px;margin-bottom: 5px;">
            <div class="btn-group">
                <button type="button" class="btn btn-primary" id="addStrategy"><span class="icon-plus">&nbsp;</span>新增
                </button>
                <!--<button type="button" class="btn btn-primary"><span class="icon-save">&nbsp;</span>保存</button>
                <button type="button" class="btn btn-primary"><span class="icon-trash">&nbsp;</span>删除</button>-->
            </div>
            <!--<div class="pull-right input-group">-->
                <!--<input type="text" class="form-control" placeholder="请输入策略id" aria-label="请输入策略id">-->
                <!--<div class="input-group-append">-->
                    <!--<span class="input-group-text"><i class="icon-search"></i>查询</span>-->
                <!--</div>-->
            <!--</div>-->
        </form>
    </div>

    <div class="strategy_list">
        <div class="table-responsive strategy_list_table" id="strategyTableDiv">
            <table class="table text-nowrap table-striped table-hover" id="strategyTable">
                <thead >
                <tr style="background: #FFFFFF">
                    <th>策略ID</th>
                    <th>展示名字</th>
                    <th>是否停用</th>
                    <th>市场</th>
                    <th>策略可用余额</th>
                    <th>针对对象</th>
                    <th>策略等级</th>
                    <th>订阅量</th>
                    <th>创建时间</th>
                    <th>简介</th>
                    <th>持仓管理</th>
                    <th>调仓记录</th>
                </tr>
                </thead>
                <tbody>
                <!--<tr>-->
                    <!--<td>strategyId</td>-->
                    <!--<td>strategyName</td>-->
                    <!--<td></td>-->
                    <!--<td>marketName</td>-->
                    <!--<td>strategyAvailableCapital</td>-->
                    <!--<td>strategyType（公开1或私有2）</td>-->
                    <!--<td>strategyLeve</td>-->
                    <!--<td>amountSubscribe </td>-->
                    <!--<td>gmtCreate</td>-->
                    <!--<td>introduce</td>-->
                    <!--<td><button class="btn-color-black"><i class=" icon-archive">&nbsp;</i>持仓</button></td>-->
                    <!--<td><button class="btn-color-black"><i class=" icon-book">&nbsp;</i>调仓</button></td>-->
                <!--</tr>-->
                </tbody>
            </table>
        </div>
    </div>

    <!--创建策略-->
    <div class="add_div" style="width:700px;height: 520px;display: none;">
        <div style="width: 100%;height: 55px; background-color: #d2e9e6;">
            <h5 class="h5_title">创建策略</h5>
        </div>
        <div style="margin-left:10% ;margin-top: 2%;">
            <div>
                <label style="margin: auto; padding: auto; font-size: 1.2rem;">策略名称：</label>
                <input id="strategyName" type="text" class="input-size" placeholder="请输入策略名称"/>
                <span id="strategyNameSpan" style="color: #FF0000;display: none">*</span>
            </div>
            <br/>
            <div>
                <label style="margin: auto; padding: auto;font-size: 1.2rem;">针对对象：</label>
                <select id="strategyType" style="margin: auto; padding: auto;font-size: 1.2rem;">
                    <option value="1">公开</option>
                    <option value="2">私有</option>
                </select>
            </div>
            <br/>
            <div>
                <label style="margin: auto; padding: auto;font-size: 1.2rem;">市场：</label>
                <select id="marketId" style="margin: auto; padding: auto;font-size: 1.2rem;">
                    <option value="1">美股 US</option>
                    <option value="2">A股 SH</option>
                    <option value="3">港股 HK</option>
                    <option value="4">A股 SZ</option>

                </select>
            </div>
            <br/>
            <div>
                <label style="margin: auto; padding: auto; font-size: 1.2rem;">策略等级：</label>
                <input id="strategyLevel" type="number" class="input-size" placeholder="请输入策略等级（整数）"/>
                <span id="strategyLevelSpan" style="color: #FF0000;display: none">*</span>
            </div>
            <br/>
            <div>
                <label style="margin: auto; padding: auto; font-size: 1.2rem;">初始资本：</label>
                <input id="strategyCapital" type="number" class="input-size" placeholder="请输入策略初始资本"/>
                <span id="strategyCapitalSpan" style="color: #FF0000;display: none">*</span>
            </div>
            <br/>
            <div>
                <label style="margin: auto; padding: auto; font-size: 1.2rem;">策略介绍：</label>
                <textarea id="introduce" style="width: 50%;" rows="3" placeholder="请输入策略介绍"></textarea>
                <span id="introduceSpan" style="color: #FF0000;display: none">*</span>
            </div>
            <br/>

            <div style="margin-left: 30%;">
                <button class="btn" id="addStrategyY" style="color: blue;"><i class="icon-ok"></i>确认</button>
                <button class="btn" id="addStrategyN" style="margin-left: 10%;color: red;"><i class="icon-remove"></i>取消
                </button>
            </div>

        </div>

    </div>


    <!--<div class="add_div" style="width:700px;height: 520px;display: none;">-->
        <!--<div style="width: 100%;height: 55px; background-color: #d2e9e6;">-->
            <!--<h5 class="h5_title" >创建策略</h5>-->
        <!--</div>-->
        <!--<div style="margin-left:20% ;margin-top: 2%;">-->
            <!--<div class="input-group">-->
                <!--<input type="text" readonly="readonly" placeholder="策略名称：" class="input-size" style="text-align: right;width: 20%"></input>-->
                <!--<div class="input-group-append">-->
                    <!--<input id="strategyName" type="text" class="input-size" placeholder="请输入策略名称"/>-->
                <!--</div>-->
                <!--<span id="strategyNameSpan" style="color: #FF0000;display: block;margin-left: 10px">*</span>-->
            <!--</div>-->
            <!--<br/>-->
            <!--<div class="input-group">-->
                <!--<input type="text" readonly="readonly" placeholder="针对对象：" class="input-size" style="text-align: right;width: 20%"></input>-->
                <!--<div class="input-group-append">-->
                    <!--<select id="strategyType" style="line-height: 1.35rem;">-->
                        <!--<option value="1">公开</option>-->
                        <!--<option value="2">私有</option>-->
                    <!--</select>-->
                <!--</div>-->
            <!--</div>-->
            <!--<br/>-->
            <!--<div class="input-group">-->
                <!--<input type="text" readonly="readonly" placeholder="市场：" class="input-size" style="text-align: right;width: 20%"></input>-->
                <!--<div class="input-group-append">-->
                    <!--<select id="marketId" style="line-height: 1.35rem;">-->
                        <!--<option value="1">美股 US</option>-->
                        <!--<option value="2">A股 SH</option>-->
                        <!--<option value="3">港股 HK</option>-->
                        <!--<option value="4">A股 SZ</option>-->
                    <!--</select>-->
                <!--</div>-->
            <!--</div>-->
            <!--<br/>-->
            <!--<div class="input-group">-->
                <!--<input type="text" readonly="readonly" placeholder="策略等级：" class="input-size" style="text-align: right;width: 20%"></input>-->
                <!--<div class="input-group-append">-->
                    <!--<input id="strategyLevel" type="number" class="input-size" placeholder="请输入策略等级（整数）"/>-->
                <!--</div>-->
                <!--<span id="strategyLevelSpan" style="color: #FF0000;display: block;margin-left: 10px">*</span>-->
            <!--</div>-->
            <!--<br/>-->
            <!--<div class="input-group">-->
                <!--<input type="text" readonly="readonly" placeholder="初始资本：" class="input-size" style="text-align: right;width: 20%"></input>-->
                <!--<div class="input-group-append">-->
                    <!--<input id="strategyCapital" type="number" class="input-size" placeholder="请输入策略初始资本"/>-->
                <!--</div>-->
                <!--<span id="strategyCapitalSpan" style="color: #FF0000;display: none">*</span>-->
            <!--</div>-->
            <!--<br/>-->
            <!--<div class="input-group">-->
                <!--<input type="text" readonly="readonly" placeholder="策略介绍：" class="input-size" style="text-align: right;width: 20%"></input>-->
                <!--<div class="input-group-append">-->
                    <!--<textarea id="introduce" style="width: 15rem;" rows="3" placeholder="请输入策略介绍"></textarea>-->
                <!--</div>-->
                <!--<span id="introduceSpan" style="color: #FF0000;display: block;margin-left: 10px">*</span>-->
            <!--</div>-->
            <!--<br/>-->

            <!--<div style="margin-left: 20%;">-->
                <!--<button class="btn" id="addStrategyY" style="color: blue;"><i class="icon-ok"></i>确认</button>-->
                <!--<button class="btn" id="addStrategyN" style="margin-left: 10%;color: red;"><i class="icon-remove"></i>取消-->
                <!--</button>-->
            <!--</div>-->

        <!--</div>-->

    <!--</div>-->


    <!--持仓列表-->
    <div class="hold_position" style="display: none">
        <div style="height: 2.25rem;margin-bottom: 0.5rem">
            <h3>持仓列表<span style="float: right;margin-top: -3px;margin-right: 10px"><button class="btn btn-primary btn-sm" id="buyNewStock" style="margin-top:5px">新增买入</button><button class="btn btn-primary btn-sm" id="noneBuy" style="margin-top:5px">新增买入</button></span></h3>
        </div>
        <div class="hold_position_table" id="holdTableDiv">
            <div class="table-responsive">
            <table class="table text-nowrap table-striped table-hover" id="holdTable">
                <thead>
                <tr style="background: #FFFFFF">
                    <th>股票代码</th>
                    <th>股票名</th>
                    <th>进场时间</th>
                    <th>价格</th>
                    <th>仓位</th>
                    <th>持仓方式</th>
                    <th>收益率</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                        <button class="btn btn-color-blue">
                            <i class="icon-arrow-down">&nbsp;</i>买入
                        </button><button class="btn btn-color-red">
                        <i class="icon-arrow-up">&nbsp;</i>卖出
                    </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        </div>
        <div class="btn_close"><button class="closeHold closeAdjustTable btn btn-default btn-sm">关闭</button></div>

    </div>

    <!--调仓列表-->
    <div class="transfer_position" id="adjustTable" style="display: none;">
        <h3>调仓列表</h3>
        <div class="transfer_position_table" id="tcTableDiv" style="overflow-x:scroll;" >
        <div class="table-responsive">
            <table class="table text-nowrap table-striped table-hover">
                <thead>
                <tr style="background: #FFFFFF">
                    <th>股票代码</th>
                    <th>股票名字</th>
                    <th>交易时间</th>
                    <th>交易方向</th>
                    <th>价格</th>
                    <th>仓位</th>
                    <th>交易方式</th>
                    <th>收益率</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                </tbody>
            </table>
        </div>
        </div>
        <div class="btn_close"><button class="closeAdjustTable btn btn-default btn-sm">关闭</button></div>

    </div>

    <!--股票买入-->
    <div class="business" id="buyView" >
        <div style="width: 100%;">
            <h2 class="_h2strategyName" style="text-align: center;">策略名称</h2>
            <p id="canBuyMoney" style="margin-left: 23rem">可用：</p>
            <h3 style="margin-left: 2rem">买入</h3>
        </div>
        <div>
            <div class="strategy_form">
                <div>
                    <label>股票代码</label>
                    <input id="buyStockId"  readonly="readonly" type='text' placeholder="请输入股票代码"/>
                </div>
                <div>
                    <label >股票名称</label>
                    <input id="buyStockName" type='text' readonly="readonly" placeholder="股票名称根据股票代码自动获取">
                </div>
                <div>
                    <label>买入价</label>
                    <input id="buyPrice" type='number' step="0.01" min="0.01" placeholder="请输入买入价"/>
                </div>
                <div>
                    <label>买入比例</label>
                    <div name="tradeVolume" class="volume">
                        <input id="buy_range_slider" type='range' step="5" value="0" />
                    </div>
                    <div class="volume_percent">
                        <input  id="buyProportion" type="text"/>
                    </div>

                </div>
                <div >
                    <label>买入量</label>
                    <input  id="buyCount" type='text' placeholder="请输入买入量"/>

                </div>
                <div>
                    <label>买入额</label>
                    <input id="buySum" type='text' placeholder="请输入买入额"/>
                </div>
                <div>
                    <label>交易时间</label>
                    <input id="buyTime" type='datetime-local' step='1' value = ''  placeholder="请输入交易时间"/>
                </div>
                <div>
                    <label>交易方式</label>
                    <select id="buyTradeDirection">
                        <option value="1">多头</option>
                        <option value="2">空头</option>
                    </select>
                </div>
                <div style="margin-left: 30%;">
                    <button class="btn" id="buyNow" style="color: blue;"><i class="icon-ok"></i>确认</button>
                    <button class="btn"  id="buyViewClose" style="margin-left: 10%;color: red;"><i class="icon-remove"></i>取消</button>
                </div>
            </div>
        </div>
    </div>


    <!--股票卖出-->
    <div class="business" id="sellView">
        <div style="width: 100%;">
            <h2 class="_h2strategyName" style="text-align: center;">策略名称</h2>
            <h3 style="margin-left: 2rem">卖出</h3>
        </div>
        <div>
            <div class="strategy_form">
                <div>
                    <label>股票代码</label>
                    <input id="sellStockId" type="text"  readonly="readonly" />
                </div>
                <div>
                    <label >股票名称</label>
                    <input  id="sellstockName" type="text"  readonly="readonly" />
                </div>
                <div>
                    <label>持仓股数</label>
                    <input id="myHoldStock" type="text"  readonly="readonly" />
                </div>
                <div>
                    <label>持仓价格</label>
                    <input id="holdPrice" type="text"  readonly="readonly" />
                </div>
                <div >
                    <label>持仓方式</label>
                    <input id="myHoldMethod" type="text"  readonly="readonly" />
                </div>
                <div>
                    <label>卖出价</label>
                    <input id="sellPrice" type='text' placeholder="请输入卖出价"/>
                </div>
                <div>
                    <label>卖出比例</label>
                    <div class="volume">
                        <input id="sell_range_slider" type='range' value="0" />
                    </div>
                    <div class="volume_percent">
                        <input id="sellProportion" type="text"/>
                    </div>

                </div>
                <div>
                    <label>卖出量</label>
                    <input id="sellCount" type='text' placeholder="请输入卖出量"/>
                </div>
                <div >
                    <label>卖出额</label>
                    <input id="sellSum" type='text' placeholder="请输入卖出额"/>
                </div>
                <div>
                    <label>交易时间</label>
                    <input id="sellTime" type='datetime-local' step="1" placeholder="默认显示当前时间，可调整"/>
                </div>
                <div style="margin-left: 30%;">
                    <button class="btn" id="sellNow" style="color: blue;"><i class="icon-ok"></i>确认</button>
                    <button class="btn"  id="SellViewClose" style="margin-left: 10%;color: red;"><i class="icon-remove"></i>取消</button>
                </div>
            </div>
        </div>
    </div>

</div>
</body>

</html>